<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#title{
				width: 100%;
				height:30px;
				background-color: aqua;
			}
			#body{
				width: 100%;
				height: 550px;
			}
			#body #left{
				width: 21%;
				height: 100%;
				background-color: darkgray;
				float: left;
			}
			#body #center{
				width: 1%;
				height: 100%;
				background-color: white;
				float: left;
			}
			#body #right{
				width: 78%;
				height: 100%;
				background-color: blanchedalmond;
				float: left;
			}
			#body #right .img{
				width: 130px;
				height: 130px;
				outline: solid 1px black;
			}
			#foot{
				width: 100%;
				height:10px ;
				background-color: blueviolet;
			}
		</style>
	</head>
	<body>
		<div id="title"></div>
		<div id="body">
			<div id="left">
				<img src="images/cat.bmp" id="img_1" draggable="true" ondragstart="drag(event)"/>
				<img src="images/cat.bmp" id="img_2" draggable="true" ondragstart="drag(event)"/>
				<img src="images/cat.bmp" id="img_3" draggable="true" ondragstart="drag(event)"/>
				<img src="images/cat.bmp" id="img_4" draggable="true" ondragstart="drag(event)"/>
			</div>
			<div id="center"></div>
			<div id="right">
				<div class="img" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
				<div class="img" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
				<div class="img" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
				<div class="img" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
			</div>
		</div>
		<div id="foot"></div>
	</body>
	<script>
		function drag(ev){
			ev.dataTransfer.setData("Text",ev.target.id);
		}
		function allowDrop(ev){
			ev.preventDefault();
		}
		function drop(ev){
			ev.preventDefault();
			var data = ev.dataTransfer.getData("Text");
			ev.target.appendChild(document.getElementById(data));
		}
	</script>
</html>
